<template>
	<view class="menu">
		<block v-for="item in list" :key="item.id">
			<view class="menu-list">
				<view class="menu-list-item" @click="$emit('click', item)">
					<view class="img" :style="{'margin-top': marginTop + 'rpx', 'margin-bottom': marginBottom + 'rpx'}" >
						<u-image
							class="image" 
							:width="width + 'rpx'" 
							:height="height + 'rpx'" 
							:src="item.url"></u-image>
					</view>
					<view class="text">{{item.name}}</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		width: [String, Number],
		height: [String, Number],
		list: {
			type: Array,
			default() {
				return []
			}
		},
		marginTop: [String, Number],
		marginBottom: [String, Number]
	},
	options: { styleIsolation: 'shared' }
}
</script>

<style lang="scss" scoped>
.menu {
	display: flex;
	background-color: $u-bg-white-color;
	&-list {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 168rpx;
		&-item {
			text-align: center;
			.img{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.image {
				/deep/ .u-image {
					margin: 0 auto;
				}
			}
			.text {
				color: $u-text-dark-color;
			}
		}
	}
}
</style>